import React from 'react';
import { Button, Switch, message, Tooltip } from 'antd';
import { connect } from 'react-redux';
import DataReportList from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import Add from './add';
import services from '../../../../services/api';

@connect(mapStateToProps)
class CreateReport extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'dataReport';
    this.listsComponent = DataReportList;
    this.addComponent = Add;
    this.editComponent = Add;
    this.model_width = 900;
    this.state = {
      ...this.state,
      riskTypes: [],
    };
  }
  componentDidMount() {
    this.freshQueryList();
    this.getAppCodeList();
    this.getProductCodeList();
    this.getRiskTypeList();
  }
  // swtichStatus
  handleSwitchStatus = (record) => {
    const param = {
      id: record.id,
      status: record.status === 1 ? 2 : 1,
    };
    services.dataReport.switchStatus(param).then((data) => {
      if (data.code === 0) {
        message.success(data.msg);
        this.freshQueryList();
      } else {
        message.error(data.msg);
      }
    });
  };

  // 获取风险类型列表
  getRiskTypeList = () => {
    services.policy.riskTypeList().then((res) => {
      if (res.code === 0) {
        this.setState({
          riskTypes: [{ id: -1, name: '全部类型' }, ...res.data],
        });
      }
    });
  };

  getColumns = () => {
    return [
      {
        title: '报告名称',
        key: 'report_name',
        dataIndex: 'report_name',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '发送时间',
        key: 'send_time',
        dataIndex: 'send_time',
        render: (text, { send_period_type_name, send_date_name }) => {
          const tempText = send_period_type_name + send_date_name + text;
          return (
            <Tooltip title={tempText} placement='topLeft'>
              <div className='overflowtext'>{tempText}</div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '所属渠道',
              this.state.applications,
              'app_id',
              this.refreshTableFilterWithAppV2.bind(this, 'app_id'),
              ['app_id', 'app_name']
            )}
          </>
        ),
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联产品',
              this.state.products,
              'product_id',
              this.refreshTableFilterWithAppV2.bind(this, 'product_id'),
              ['product_id', 'product_name']
            )}
          </>
        ),
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联事件',
              this.state.events,
              'event_id',
              this.refreshTableFilterWithAppV2.bind(this, 'event_id'),
              ['event_id', 'event_name']
            )}
          </>
        ),
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle('风险类型', this.state.riskTypes, 'risk_type_id', this.refreshTableFilter, [
              'id',
              'name',
            ])}
          </>
        ),
        dataIndex: 'risk_type_name',
        key: 'risk_type_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '报告状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, record) => {
          return <Switch checked={text === 1} onChange={this.handleSwitchStatus.bind(this, record)} />;
        },
      },
      {
        title: '接收人',
        dataIndex: 'people_count',
        render: (text) => (
          <Tooltip title={text + '人'} placement='topLeft'>
            <div className='overflowtext'>{text + '人'}</div>
          </Tooltip>
        ),
      },
      {
        title: '接收方式',
        dataIndex: 'receive_type',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '报告说明',
        dataIndex: 'remark',
        key: 'remark',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '创建人/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        render: (text, { update_user_name }) => {
          return (
            <Tooltip title={`${text}/${update_user_name}`} placement='topLeft'>
              <div className='overflowtext'>{`${text}/${update_user_name}`}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div>
        <div className='flex flex-start'>
          <Button type='primary' onClick={this.add.bind(this, { title: '添加数据报告' })}>
            添加报告
          </Button>
        </div>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            mediator={this}
            edit={this.edit}
            showDetail={this.showDetail}
            onChangePagination={this.onChangePagination}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            rowKey='id'
          />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { data_report_send_period_type, data_report_week, data_report_month_date, data_report_send_type } = state.code;
  return {
    data_report_send_period_type,
    data_report_week,
    data_report_month_date,
    data_report_send_type,
  };
}
export default CreateReport;
